<!--
 * @Description: 日历组件
 * @Author: Zhanghan
 * @Date: 2024-11-03 19:57:19
 * @LastEditTime: 2025-05-21 16:25:48
 * @LastEditors: ZhangHan
-->
<template>
  <div>
    <ElCalendar ref="calendar">
      <template #header="{ date }">
        <span>我的日历</span>
        <span>{{ date }}</span>
        <el-button-group>
          <el-button size="small" @click="selectDate('prev-year')">
            上一年
          </el-button>
          <el-button size="small" @click="selectDate('prev-month')">
            上个月
          </el-button>
          <el-button size="small" @click="selectDate('today')">Today</el-button>
          <el-button size="small" @click="selectDate('next-month')">
            下个月
          </el-button>
          <el-button size="small" @click="selectDate('next-year')">
            下一年
          </el-button>
        </el-button-group>
      </template>
      <template #date-cell="{ data }">
        <p :class="data.isSelected ? 'is-selected' : ''">
          {{ data.day.split("-").slice(1).join("-") }}
          {{ data.isSelected ? "✔️" : "" }}
        </p>
      </template>
    </ElCalendar>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { ElCalendar, ElButton, ElButtonGroup, ElProgress } from "element-plus";
import type { CalendarDateType, CalendarInstance } from "element-plus";

const calendar = ref<CalendarInstance>();
const selectDate = (val: CalendarDateType) => {
  if (!calendar.value) return;
  calendar.value.selectDate(val);
};
</script>
